<template>
  <div class="mform">
    <el-row :gutter="10">
      <el-col :span="12">
        <div class="tp1">
          <img class="tim" src="../../assets/2.png" alt="">
          <div class="tt">
            销售数据（元）
          </div>
          <div class="tit">
            <div class="titi">
              <div class="titit">今日</div>
              <div class="titin">{{ sales.today_payment_amount_total || 0 }}</div>
            </div>
            <div class="titi">
              <div class="titit">本周</div>
              <div class="titin">{{ sales.thisweek_payment_amount_total || 0 }}</div>
            </div>
            <div class="titi">
              <div class="titit">本月</div>
              <div class="titin">{{ sales.thismonth_payment_amount_total || 0 }}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="tp1">
          <img class="tim" src="../../assets/1.png" alt="">
          <div class="tt">
            会员数据（人）
          </div>
          <div class="tit">
            <div class="titi">
              <div class="titit">今日</div>
              <div class="titin">{{ member.today_member_count || 0 }}</div>
            </div>
            <div class="titi">
              <div class="titit">本周</div>
              <div class="titin">{{ member.thisweek_member_count || 0}}</div>
            </div>
            <div class="titi">
              <div class="titit">本月</div>
              <div class="titin">{{ member.thismonth_member_count || 0}}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="t2">
          <p>待处理订单（笔）</p>
          <p class="t2n red">{{ undeliver }}</p>
          <div class="ico">
            <el-icon>
              <Checked />
            </el-icon>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="t2">
          <p>总销售额（元）</p>
          <p class="t2n">{{ sales.payment_amount_total || 0 }}</p>
          <div class="ico">
            <el-icon><WalletFilled /></el-icon>
          </div>
        </div>
      </el-col>
      <el-col :span="4">

        <div class="t2">
          <p>今日订单数（笔）</p>
          <p class="t2n">{{ sales.today_order_count || 0 }}</p>
          <div class="ico">
            <el-icon><List /></el-icon>
          </div>
        </div>
      </el-col>
      <el-col :span="4">

        <div class="t2">
          <p>今日退款数（笔）</p>
          <p class="t2n">{{ sales.today_refund_count || 0 }}</p>
          <div class="ico">
            <el-icon><Failed /></el-icon>
          </div>
        </div>
      </el-col>
      <el-col :span="4">

        <div class="t2">
          <p>今日商品件数（件）</p>
          <p class="t2n">{{ sales.today_goods_count || 0}}</p>
          <div class="ico">
            <el-icon><GoodsFilled /></el-icon>
          </div>
        </div>
      </el-col>
      <el-col :span="4">

        <div class="t2">
          <p>会员总数（人）</p>
          <p class="t2n">{{ member.member_count || 0 }}</p>
          <div class="ico">
            <el-icon><UserFilled /></el-icon>
          </div>
        </div>
      </el-col>


      <el-col :span="12">
        <div class="chart-til">
          <div class="tl">每日销售趋势</div>
        </div>
        <div style="width:100%; height:350px" ref="orderRef"></div>
      </el-col>
      <el-col :span="12">
        <div class="chart-til">
          <div class="tl">用户增长趋势</div>
        </div>
        <div style="width:100%; height:350px" ref="memberRef"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup name="Home">
import * as echarts from 'echarts';
const {proxy} = getCurrentInstance();
const orderRef = ref(null)
const memberRef = ref(null)

onMounted(() => {
  getData()
});


const data = reactive({
  member: {},
  recharge: {},
  sales: {},
  week_member: {},
  week_sales: {},
  undeliver: 0
})
const {
  member,
  recharge,
  sales,
  undeliver,
  week_member,
  week_sales
} = toRefs(data)
async function getData() {
  let res = await proxy.$post('homeData',{})
  if(res.code == 0) {
    data.member = res.data.member
    data.recharge = res.data.recharge
    data.sales = res.data.sales
    data.week_member = res.data.week_member
    data.week_sales = res.data.week_sales
    data.undeliver = res.data.undeliver
    setWeekSales()

    setWeekMember()
  }
}

function setWeekSales() {
  var orderChart = echarts.init(orderRef.value);
  orderChart.setOption({
    tooltip: {},
    legend: {
      data: ['销售收入'],
      right: '20'
    },
    grid: {
      left: '4%',
      right: '4%',
      bottom: '8%',
      containLabel: true
    },
    xAxis: {
      data: data.week_sales.key
    },
    yAxis: {
      // axisLabel: {
      //   formatter: function (value, index) {
      //     return parseInt(value / 10000) + "w";
      //   },
      // },
    },
    series: [{
      name: '销售收入',
      type: 'line',
      smooth: true,
      // showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#f155f9'
        },
        {
          offset: 1,
          color: '#376bf3'
        }
        ])
      },
      data: data.week_sales.value
    }]
  })
}

function setWeekMember() {
  var memberChart = echarts.init(memberRef.value);
  memberChart.setOption({
    tooltip: {},
    legend: {
      data: ['会员数'],
      right: '20'
    },
    grid: {
      left: '4%',
      right: '4%',
      bottom: '8%',
      containLabel: true
    },
    xAxis: {
      data: data.week_member.key
    },
    yAxis: {
    //   axisLabel: {
    //     formatter: function (value, index) {
    //       return parseInt(value / 1000) + "k";
    //     },
    //   },
    },
    series: [{
      name: '会员数',
      type: 'line',
      smooth: true,
      // showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#f155f9'
        },
        {
          offset: 1,
          color: '#376bf3'
        }
        ])
      },
      data: data.week_member.value
    }]
  })

}

</script>
<style scoped lang="scss">
.mform {
  padding: 10px;

  .tp1 {
    width: 100%;
    height: 130px;
    background-image: linear-gradient(#c6eefc, #fff, #eff9fe);
    border-radius: 8px;
    position: relative;

    .tim {
      position: absolute;
      width: 60px;
      height: auto;
      left: 10px;
      bottom: 10px;
    }

    .tt {
      padding-left: 20px;
      padding-top: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #000;
    }

    .tit {
      width: 100%;
      padding-left: 80px;
      padding-top: 20px;
      display: flex;
      align-items: center;

      .titi {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .titit {
          font-size: 12px;
          color: #999;
        }

        .titin {
          font-size: 20px;
          font-weight: 700;
          color: #000;
          margin-top: 10px;
        }
      }
    }
  }

  .t2 {
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    position: relative;
    height: 90px;
    box-shadow: 1px 1px 10px 2px #ececec;
    margin-top: 10px;
    font-size: 12px;
    color: #999;

    .t2n {
      font-size: 20px;
      font-weight: 700;
      color: #000;
      margin-top: 10px;
    }

    .ico {
      width: 40px;
      height: 40px;
      background-color: #c6eefc;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: 20px;
      top: 25px;

      .el-icon {
        color: #fff;
        font-size: 24px;
      }
    }
  }

  .el-col {
    margin-bottom: 10px;
  }
}

.red {
  color: #f00 !important;
}

.chart-til{
  width: 100%;
  height: auto;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tl{
    padding-left: 30px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
  }
}

</style>
